{% extends 'base/base.html' %}
{% load static %}
<!doctype html>
<html lang="zh-CN">
<head>
    {% block top %}
        <meta charset="utf-8">
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    {% endblock %}

    {% block jc %}
        <link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' %}">
        <link rel="stylesheet" type="text/css" href="{% static 'css/style2.css' %}">
        <link rel="stylesheet" type="text/css" href="{% static 'css/font-awesome.min.css' %}">
        <link rel="apple-touch-icon-precomposed" href="{% static 'images/icon/icon.png' %}">
        <link rel="shortcut icon" href="{% static 'images/icon/favicon.ico' %}">
        <script src="{% static '/js/jquery-1.11.3/jquery.min.js' %}"></script>
                            <head>
    <script src="/static/tiny_mce/tiny_mce.js"></script>
<script>
        tinyMCE.init({
            'mode':'textareas',
            'width':700,
            'height':600,
        })
</script>
<style>
       /*固定定位  */
        .sidebar{position: fixed;left: 0;top:150px;}
</style>


</head>

    {% endblock %}

</head>

{% block header %}
    <header>
        <nav class="topnav" id="topnav"><a href="{% url 'App:index' %}"><span>首页</span><span
                class="en">Protal</span></a><a href="{% url 'App:aboutme' %}"><span>关于我</span><span
                class="en">About</span></a>
            <a href="{% url 'App:register' %}"><span>注册</span><span class="en">Learn</span></a>
            {#      在这里判断是否带session#}
            {% if usession %}
                <a href="{% url 'App:login' %}"><span>欢迎:{{ usession }}</span><span class="en">Learn</span></a>
                <a href="{% url 'App:logingout' %}"><span>退出</span><span class="en">Learn</span></a>
            {% else %}
                <a href="{% url 'App:login' %}"><span>登录</span><span class="en">Learn</span></a></nav>
            {% endif %}

    </header>
{% endblock %}

{% block body %}

    <body class="user-select">
{% endblock %}


{% block content %}
    <section class="container-fluid">
        <section class="row">
         <aside class="col-sm-3 col-md-2 col-lg-2 sidebar">
      <ul class="nav nav-sidebar">
        <li class="active"><a href="/">报告</a></li>
        <li><a href="{% url 'App:article' %}">文章</a></li>
        <li><a href="{% url 'App:mycomment' %}">评论</a></li>
        <li><a href="{% url 'App:draft' %}">草稿箱</a></li>
      </ul>

    </aside>

            <div class="col-sm-9 col-sm-offset-3 col-md-10 col-lg-10 col-md-offset-2 main" id="main">
                <div class="row">
                    <form action="{% url 'App:addarticle' %}" method="post" class="add-article-form"
                          enctype="multipart/form-data" name="f1">
                        {% csrf_token %}
                        <div class="col-md-9">
                            <h1 class="page-header">撰写新文章</h1>
                            <div class="form-group">
                                <label for="article-title" class="sr-only">标题</label>
                                <input type="text" id="article-title" name="title" class="form-control"
                                       placeholder="在此处输入标题" required autofocus autocomplete="off">
                            </div>
                            <div class="add-article-box">
                                <h2 class="add-article-box-title"><span>内容</span></h2>
                                <div class="add-article-box-content">
                                    <textarea class="form-control"  id='articledata' name="mycontent"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <h1 class="page-header">操作</h1>
                            <div class="add-article-box">
                                <h2 class="add-article-box-title"><span>分类</span></h2>
                                <div class="add-article-box-content">
                                    <ul class="category-list">
                                        {% for f in tagslist %}
                                            <li>
                                                <label>
                                                    <input name="category" type="checkbox" value="{{ f }}">{{ f }}
                                                    <em class="hidden-md">( 栏目ID:{{ forloop.counter }})</em></label>
                                            </li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            </div>
                            <div class="add-article-box">
                                <h2 class="add-article-box-title"><span>草稿箱</span></h2>
                                <div class="add-article-box-footer">
                                    <a href="{% url 'App:draft' %}"  id="draft" class="btn btn-primary">保存到草稿箱</a>
                                </div>
                            </div>
                            <div class="add-article-box">
                                <h2 class="add-article-box-title"><span>发布</span></h2>
                                <div class="add-article-box-footer">
                                    <button class="btn btn-primary" type="submit" name="submit">发布</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </section>
    </section>

    <script>

        $('#articledata').blur(function () {
            data = $('#articledata').val()
            console.log(data)
        })

        {#取input标签内的值#}
        var arr = $('input[name="category"]')
        var myarr = []
        for (var i = 0; i < arr.length; i++) {
            arr[i].onclick = function () {
                {#console.log($(this).val())#}
               myarr.push($(this).val())
            }
        }

    {#保存到草稿箱#}
    $('#draft').click(function () {
        console.log(myarr)

        var title = $('#article-title').val()
        {#console.log(title)#}

        var content = tinyMCE.getInstanceById('articledata').getBody().innerHTML;
        console.log(content)

        var token = document.f1.csrfmiddlewaretoken.value

         $.post('{% url "App:draft" %}', {'myarr': myarr,'content':content,'title':title,'csrfmiddlewaretoken':token}, function (data) {
                console.log('-----')
            },'json')

    })


    </script>

{% endblock %}
</body>>
</html>